<template>
    <div id="main">
        <Header title="喵咪电影"/> 
            <div id="content">
                <div class="movie_menu">
                    <router-link tag="div" to="/movie/city" class="city_name">
                        <span>{{ $store.state.city.nm }}</span><i class="iconfont icon-lower-triangle"></i>
                    </router-link>
                    <div class="hot_swtich">
                        <router-link tag="div" to="/movie/hotShowing" class="hot_item">
                        正在热映
                        </router-link>
                        <router-link  tag="div" to="/movie/comingSoon" class="hot_item">
                        即将上映
                        </router-link>
                    </div>
                    <router-link tag="div" to="/movie/search" class="search_entry">
                        <i class="iconfont icon-search"></i>
                    </router-link>
			    </div>
            <keep-alive>
                <router-view/>
            </keep-alive>
        </div>
        <TabBar/> 
    <router-view name="movieDetail" />
</div>
</template>

<script>
import Header from '@/components/Header'
import TabBar from '@/components/TabBar' 
export default {
    name: 'Movie',
    components: {
        Header,
        TabBar
    }
}
</script>

<style lang="scss" scoped>
 .movie_menu { 
    width: 100%; 
    height: 45px; 
    border-bottom: 1px solid $bdColor; 
    @include flex-content();
    background: #fff; 
    z-index: 10;
    .city_name { 
        margin-left: 20px; 
        height: 100%; 
        line-height: 45px;
    }
    .hot_swtich { 
        display: flex; 
        height: 100%; 
        line-height: 45px;
        
        .hot_item {     
            width: 80px;
            font-size: 15px; 
            color: #666; 
            text-align: center; 
            margin: 0 12px; 
            font-weight: 700;
        }
    }
    .search_entry { 
        margin-right: 20px;
        height: 100%; 
        line-height: 45px;
        i {  
            font-size: 24px; 
            color:red;
        }
    }
    .my-active {
        color: #ef4238 !important; 
        border-bottom: 2px #ef4238 solid;
    }
}

 
</style>

